<template>
  <div class="qlf-container">
  <div class="form-main" v-if="formData.regCert">
    <div class="gray-line"></div>
    <el-form
        :model="formData"
        ref="form2"
        label-position="top"
        class="form"
    >
      <el-row :gutter="160">
        <el-col :span="8">
          <el-form-item label="注册证书编号" prop="certCode">
            <el-input
                v-model="formData.regCert.certCode"
                disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专业名称" prop="major">
            <el-input v-model="formData.regCert.major" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="聘用单位" prop="employUnit">
            <el-input
                v-model="formData.regCert.employUnit"
                disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="160">
        <el-col :span="8">
          <el-form-item label="有效期" prop="validDate">
            <el-input
                v-model="formData.regCert.validDate"
                disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发证日期" prop="certTime">
            <el-input
                v-model="formData.regCert.certTime"
                disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证书下载" prop="postalCode">
            <el-button type="primary" size="mini" @click="down"
            >立即下载</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  </div>
</template>

<script>
import userApi from '@/api/user';
import { decrypt } from '@/utils/sms4util';

export default {
  name: "dockPersonalUserCert",
  computed: {
    userId() {
      return this.$store.state.user.userInfo.id;
    },
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
  },
  mounted() {
    this.prePathQuery = this.$route.params;
    this.init();
  },
  data() {
    return {
      formData: {},
      prePathQuery: {},
    };
  },
  methods: {
    async init() {
      let params = {
        id: this.userId,
        type: this.userType,
      };
      // 获取用户信息（证书）
      const res = await userApi.getUserInfo(params);
      this.formData = {
        ...this.formData,
        ...res,
        phone: res.phone ? decrypt(res.phone) : '',
        paperCode: res.paperCode ? decrypt(res.paperCode) : '',
      };
    },
    // 下载
    down() {
      window.open(this.formData?.regCert?.certFile?.fileUri);
    },
  }
}
</script>

<style lang="scss" scoped>
.qlf-container {
  margin: 20px auto;
  width: 1200px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
.head {
  width: 100%;
  height: 80px;
  padding: 0 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.main {
  margin-top: 18px;
  flex: 1;
  background-color: #fff;
.form-main {
  padding: 20px;
.title {
  height: 40px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #f2f2f2;
}
.form {
  margin-top: 20px;
}
.btn {
  display: flex;
  justify-content: center;
}
}
.form-main:first-child {
  border-bottom: 1px solid #f2f2f2;
}
}
}
</style>
